Ce ar trebui de stiut pe scurt despre Ajax:
– este prescurtarea de la “Asynchronous JavaScript and XML”
– termenul a fost introdus de către Jesse James Garrett în februarie 2005
– nucleul său îl reprezintă obiectul XMLHttpRequest care este folosit pentru a schimba date asincron cu serverul web
– nu este o tehnologie, ci termenul se referă la un grup de tehnologii
Avantaje ale folosirii Ajax-ului:
– în primul rând elimină refresh-ul paginii web, ceea ce face ca aplicaţia web să semene cu una desktop şi astfel duce la o îmbunătăţire a interefeţei utilizator
– îmbunătăţire a lungimii de bandă
– o separare a datelor, funcţionalităţii şi a formatări paginii
Dezavantaje
– nu rulează pe versiuni vechi ale browserelor
– lipsa funcţionalităţii a butoanelor de back şi forward (deşi mai nou sau găsit work – around uri)
– la timpi de răspuns foarte mari utilizatorul are impresia că cererea lui nu este procesată (acest lucru poate fi evitat introducând un preloader)
– unele dezavantaje în privinţa SEO
– nu rulează dacă Javascript-ul este oprit de către utilizator (sau browser-ul nu cunoaşte limbajul javascript, cum sunt browserele text only)
Un “Hello World” al Ajax-ului
De obicei acest lucru este realizat printr-o aplicaţie care adună două numere. Adunarea va fi realizată de către un script php care va fi “chemat de către Ajax”
hello.html
Pagina are două input-uri care au asignate două id-uri nr1 respectiv nr2 şi un buton de submit care atunci când este apasat se execută funcţia calculeaza definita în fişierul ajax.js inclus în head-ul paginii.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World Ajax</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
Nr 1 = <input type="text" id="nr1" />
Nr 2 = <input type="text" id="nr2" />
<br />
<input type="submit" value="Calculeaza" onclick="javascript:calculeaza();" />
<div id="rezultat" />
</body>
</html>ajax.js
În acest fişier se creează obiectul XMLHttpRequest care este “inima” Ajax-ului şi funcţiile care lucrează cu acesta
var xmlHttp = creazaXmlHttp();
/*
Returneaza obiectul XMLHttpRequest creat
*/
function creazaXmlHttp()
{
var xmlHttp;
// pentru IE
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
//Pt Mozilla sau alte browsere
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
if (!
xmlHttp)
alert("Nu s a putut crea obiectul XMLHttpRequest .");
else
return xmlHttp;
}
/*
Acesta functie preia numerele introduse in input-uri si le trimite php-ului pentru calculare
*/
function calculeaza()
{
// verificam daca xmlHttp este liber
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
//obtinem cele doua valori ale numerelor
var nr1 = document.getElementById('nr1').value;
var nr2 = document.getElementById('nr2').value;
// executam script-ul php de adunare trimitand cele doua numere ca paramentri prin get
xmlHttp.open("GET", "php/calculeaza.php?nr1=" + nr1+"&nr2="+nr2, true);
//definim functia care se va ocupa de manipularea rezultatului primit de la script-ul php
xmlHttp.onreadystatechange = gestioneazaRezultat;
// trimitem cererea catre server
xmlHttp.send(null);
}
}
/*
Acesta este functia de "callback" care primeste rezultatul de la php
*/
function gestioneazaRezultat()
{
// daca rezultatul este obtinut
if (xmlHttp.readyState == 4)
{
// status = 200 arata faptul ca cerea a fost rezoltata cu success
if (xmlHttp.status == 200)
{
// extragem rezultatul
raspuns = xmlHttp.responseText;
//modificam div-ul rezultat cu rezultatul
document.getElementById("rezultat").innerHTML = '<b> Suma =' + raspuns + '</b>';
}
// daca statusul este diferit avem o problema
else
{
alert("Problema la accesare: " +xmlHttp.statusText);
}
}
}calculeaza.php
În acest script pur şi simplu se adună ceea ce se primeşte prin get şi este trimis spre procesare
<?php
echo $_GET['nr1']+$_GET['nr2'];
?>